<template>
  <div class="page-card handle-event">
    <h-query :showKey="[]" :query="query" @search="search">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click.stop="show = true">手工添加</a-button> -->
    </h-query>
    <a-row :gutter="[20,20]" v-if="list.length">
      <a-table :dataSource="list" :columns="columns" row-key="id" cell-empty-content="-" :pagination="false">
        <template slot="titleTop" slot-scope="text,record">
          <div v-html="text" @click="toLink(record.link)"></div>
        </template>
        <template slot="describe" slot-scope="text">
          <div v-html="text" ></div>
        </template>
        <!-- <template slot="source" slot-scope="text">
          <a style="color:red">{{ text.source }}</a>
        </template> -->
        <template slot="action" slot-scope="text">
<!--          <a-button type="link" style="color: #1F3B8A" @click="handle(text)" v-if="text.is_handle !== 1">进行处置</a-button>-->

          <a-dropdown :trigger="['click']" v-if="text.is_handle !== 1">
            <a-button type="link" style="color: #1F3B8A">进行处置</a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="0">
                  <a @click="handle(text)">处置事件</a>
                </a-menu-item>
                <a-menu-item key="1">
                  <a @click="handle3(text)">观察事件</a>
                </a-menu-item>
<!--                <a-menu-item key="1">-->
<!--                  <a-popconfirm-->
<!--                    title="确定要观察事件吗？"-->
<!--                    ok-text="确定"-->
<!--                    cancel-text="取消"-->
<!--                    @confirm="handle2(text)"-->
<!--                  >-->
<!--                    观察事件-->
<!--                  </a-popconfirm>-->
<!--                </a-menu-item>-->
              </a-menu>
            </template>
          </a-dropdown>
          <a-button type="link" style="color: #01A44A" v-else>已处置</a-button>

        </template>
      </a-table>
      <!-- <a-col :span="8" v-for="(item, i) in list" :key="i">
        <div class="handle-event--card">
          <h1 @click="toDetailYq(item, 'yq')" class="ellipsis">{{ item.title | htmlFilter }}</h1>
          <p class="ellipsis-5">{{ item.describe | htmlFilter }}</p>
          <div class="a-button-event-right">
            <a-button type="primary" @click="handle(item)" v-if="item.is_handle !== 1">进行处置</a-button>
            <a-button type="primary" :disabled="true" v-else>已处置</a-button>
          </div>
          <div class="handle-event--footer">
            <p>
              <span class="red">{{ item.source }}</span>
             --- <a-divider type="vertical"></a-divider>{{ item.from }}
            </p>
            <span>{{ item.createTime }}</span>
          </div>
        </div>
      </a-col> -->
    </a-row>
    <a-empty v-else></a-empty>
    <div class="hlist-pagination" style="">
      <a-pagination v-model="current" v-bind="paginationConfig" @change="change" />
    </div>

    <createEvent v-model="show" @submit="submit" />

    <!-- 处置事件 -->
    <createEventHandle v-model="handleShow" :id="id" :typeId="typeId" @submit="submit" />
    <create-event-watch v-model="watchShow" :id="id" :typeId="typeId" @submit="submit" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';
import createEvent from '../home/action/createEvent';
import createEventHandle from '../home/action/createEventHandle';
import {updateSentimentToObserve, yqList, yqList2} from '@/api/serve';
import { replaceHTML } from '@/api/common';
import moment from "moment/moment";
import CreateEventWatch from '@/views/home/action/createEventWatch.vue';

export default {
  components: {
    CreateEventWatch,
    SvgIcon,
    createEvent,
    createEventHandle
  },
  inject: ['toDetail'],
  data() {
    return {
      show: false,
      id: '',
      handleShow: false,
      watchShow: false,
      current: 1,
      paginationConfig: {
        pageSize: 20,
        total: 100
      },
      list: [],
      typeId: '',
      queryParams: {
        pageNo: 1,
        pageSize: 20
      },
      columns: [
        {
          title: '事件标题',
          dataIndex: 'titleTop',
          key: 'titleTop',
          ellipsis: true,
          slots: { customRender: 'titleTop' },
          scopedSlots: { customRender: 'titleTop' }
        },
        {
          title: '事件正文',
          dataIndex: 'describe',
          key: 'describe',
          ellipsis: true,
          slscopedSlotsots: { customRender: 'describe' }
        },
        {
          title: '来源',
          dataIndex: 'source',
          key: 'source',
          scopedSlots: { customRender: 'source' }
        },
        {
          title: '获取时间',
          dataIndex: 'create_time',
          key: 'create_time',
          slscopedSlotsots: { customRender: 'create_time' }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: 200
        }
      ],
      query: [
        {
          key: 'title',
          label: '关键词',
          type: 'input'
        },
        {
          key: 'isHandle',
          label: '处置状态',
          type: 'select',
          options: [
            {
              label: '已处置',
              value: 1
            },
            {
              label: '未处置',
              value: 0
            },
            {
              label: '全部',
              value: ''
            }
          ]
        },
        {
          key: ['startTime', 'endTime'],
          label: '时间',
          type: 'dateTime2'
        }
      ]
    };
  },
  created() {
    this.getYqList();
  },
  methods: {
    toLink(link) {
      window.open(link, '_blank');
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.getYqList();
    },
    change(page) {
      this.queryParams.pageNo = page;
      this.getYqList();
    },
    submit() {
      this.show = false;
      this.getYqList();
    },
    // 最新舆情事件
    getYqList() {
      yqList2(this.queryParams).then(res => {
        this.paginationConfig.total = res.data.count.value;
        this.list = res.data.data.map(e => {
          return {
            ...e,
            titleTop: e.title,
            content: e.content && replaceHTML(e.content)
          };
        });
      });
    },
    handle({ id, typeId }) {
      this.handleShow = true;
      this.id = id;
      this.typeId = typeId;
    },
    handle3({ id, typeId }) {
      this.watchShow = true
      this.id = id
      this.typeId = typeId
    },

    handle2({ id }) {
      updateSentimentToObserve({
        id: id,
        describe: '已关注事件'
      }).then(res => {
        this.$message.success('舆情文章转为观察事件成功!');
        this.getYqList();
      });
    },
    toDetailYq(item, key) {
      if (!item.link) return;
      window.open(item.link);
      // this.$router.push({ path: '/yqDetail', query: { id: item.id, typeId: item.typeId, key } });
    }
  }
};
</script>

<style scoped lang="less">
  h1,p {
    margin: 0;
  }
  .handle-event {
    .a-button-blue {
      position: absolute;
      right: 0;
      top: 0;
    }
    .handle-event--card {
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
      padding: 20px 20px;
      position: relative;
      border-radius: 10px;
      height: 273px;
      // padding-bottom: 93px;
      h1 {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        cursor: pointer;
        &:hover {
          color: #3F8CFF;
        }
      }
      >p.tags {
        margin-top: 0;
        >span:first-child {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          margin-right: 12px;
        }
        >span:last-child {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }
      >p {
        font-size: 15px;
        font-weight: 400;
        color: #999999;
        line-height: 1.5;
        margin-top: 8px;
        min-height: 110px;
      }
      .handle-event--footer {
        margin-top: -26px;
        position: relative;
        width: 60%;
        p {
          font-size: 14px;
          font-weight: 400;
          color: #999;
        }
        >span {
          position: absolute;
          right: 0;
          top: 4px;
        }
      }
      .handle-event--action {
        width: 100%;
        height: 73px;
        background: rgba(49, 116, 254, 0.1);
        font-size: 18px;
        font-weight: 400;
        color: #1F3B8A;
        line-height: 73px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        cursor: pointer;
        .delete-icon {
          position: absolute;
          right: 20px;
          font-size: 30px;
          top: 50%;
          transform: translate(0, -50%);
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      .handle-event--tip {
        position: absolute;
        right: 0;
        top: 0;
        width: 98px;
        height: 36px;
        color: #fff;
        text-align: center;
        text-indent: 4px;
        line-height: 36px;
      }
    }
    .hlist-pagination {
      margin: 20px 0;
      text-align: center;
      margin-top: 80px;
    }
    .handle-status {
      // width: 82px;
      display: inline-block;
      padding: 0 12px;
      height: 33px;
      background: rgba(49, 116, 254, 0.1);
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #3174FE;
      text-align: center;
      line-height: 33px;
      margin-top: 12px;
      &.ending {
        color: #fff;
        background: #1F3B8A;
      }
    }
    .handle-more {
      color: #3174FE;
      margin-left: 12px;
      cursor: pointer;
    }
    .a-button-event-right {
      text-align: right;
      margin-top: 12px;
    }
  }
</style>
